<template>
  <section class="sp-section sp-upload">
    <el-upload
      drag
      show-file-list
      action=""
      name="file"
      :auto-upload="false"
      :on-change="getUpload"
      :on-error="() => { alert('上传失败') }"
      :on-success="() => { $alert('上传成功') }"
    >
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将周报拖到此处，或<em>点击选择文件</em></div>
      <div class="el-upload__tip" slot="tip">只能上传doc/docx文件，且不建议超过10MB</div>
    </el-upload>
    <!-- <el-button class="sp-upload__button" type="primary" @click="setUpload">确定上传</el-button> -->
  </section>
</template>

<script>
import { uploadWeekFile, uploadWeekSrc } from '@/api/map'

export default {
  name: 'Upload',
  components: {},
  props: {},
  data () {
    return {
      auth: {
        openid: ''
      }
    }
  },
  created () {},
  mounted () {
    this.auth.openid = window.localStorage.getItem('token')
  },
  destroyed () {},
  methods: {
    async getUpload (e) {
      console.log(e)
      const formData = new FormData()
      formData.append('file', e.raw)
      formData.append('openid', this.auth.openid)
      const { data } = await uploadWeekFile(formData)
      console.log('data', data)
      uploadWeekSrc(data).then(res => {
        this.$notification({
          title: res.status ? '上传成功' : '上传失败',
          type: res.status ? 'success' : 'error'
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .sp-upload {
    position: relative;
    padding-bottom: 20px;

    &__button {
      position: absolute;
      width: 130px;
      left: 50%;
      top: 60%;
      margin-left: -65px;
    }

    ::v-deep .el-upload {
      display: block;
    }
    ::v-deep .el-upload-dragger {
      width: 100%;
      height: 300px;
      padding-top: 60px;
    }
  }
</style>
